<template>
  <div class="css2_6">
      <h1>2.6  CSS3过渡</h1>
      <p>
        <pre>
          通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样
式变换为另一种样式时为元素添加效果。
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。
它如何工作？
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
·规定您希望把效果添加到哪个 CSS 属性上
·规定效果的时长
实例
应用于宽度属性的过渡效果，时长为 2 秒：
div
{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}
注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。所以请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：
实例
规定当鼠标指针悬浮于 &lt;div> 元素上时：
body{
            perspective: 500px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            transition: 1s all;//给所有属性添加1s过渡
            
        }
        div:hover{
            transform: rotate3d(1,1,0,45deg);
        }
        </pre>
      </p>
      <video src="../assets/c3实例视频/transition.mp4" width="600px" controls></video>
      <h2>过渡属性</h2>
      <p>下面的表格列出了所有的转换属性：</p>
      <table border="1px">
        <tr>
          <th>属性</th>
          <th>描述</th>
          <th>CSS</th>
        </tr>
        <tr>
          <td>transition</td>
          <td>简写属性，用于在一个属性中设置四个过渡属性。</td>
          <td>3</td>
        </tr>
        <tr>
          <td>transition-property</td>
          <td>规定应用过渡的 CSS 属性的名称。</td>
          <td>3</td>
        </tr>
        <tr>
          <td>transition-duration</td>
          <td>定义过渡效果花费的时间。默认是 0。</td>
          <td>3</td>
        </tr>
        <tr>
          <td>transition-timing-function</td>
          <td>规定过渡效果的时间曲线。默认是 "ease"。</td>
          <td>3</td>
        </tr>
        <tr>
          <td>transition-delay</td>
          <td>规定过渡效果何时开始。默认是 0。</td>
          <td>3</td>
        </tr>
      </table>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>